<template>
    <el-form ref="ruleFormRef" :model="ruleForm" size="small" status-icon >
        <el-descriptions :column="3" border size="small">
            <el-descriptions-item label="申请部门">{{ruleForm.role_id > 0 ? ruleForm.role.name : '-'}}</el-descriptions-item>
            <el-descriptions-item label="申请人">{{ruleForm.user.name}}</el-descriptions-item>
            <el-descriptions-item label="申请日期">{{ruleForm.apply_date}}</el-descriptions-item>
            <el-descriptions-item label="申请金额">{{ ruleForm.apply_price }}</el-descriptions-item>
            <el-descriptions-item label="稽核金额">{{ ruleForm.audit_price }}</el-descriptions-item>
            <el-descriptions-item label="还借支">{{ ruleForm.back_borrow }}</el-descriptions-item>
            <el-descriptions-item label="实付金额">{{ ruleForm.price }}</el-descriptions-item>
            <el-descriptions-item label="对方性质">{{ ruleForm.nature }}</el-descriptions-item>
            <el-descriptions-item label="支付方式">{{ ruleForm.pay_type }}</el-descriptions-item>
            <el-descriptions-item label="收款方式">{{ ruleForm.receive_type }}</el-descriptions-item>
        </el-descriptions>
        <el-table :data="tableData" border show-summary style="width: 100%;height: 200px !important;">
            <el-table-column label="费用科目" prop="title" show-overflow-tooltip />
            <el-table-column label="分摊类型" prop="type" show-overflow-tooltip />
            <el-table-column label="费用承担项目" prop="project" show-overflow-tooltip />
            <el-table-column label="项目状态" prop="status" show-overflow-tooltip />
            <el-table-column label="费用承担部门" prop="role" show-overflow-tooltip />
            <el-table-column label="申请金额" prop="apply_price" show-overflow-tooltip />
            <el-table-column label="稽核金额" prop="audit_price" show-overflow-tooltip />
        </el-table>
        <el-descriptions :column="4" border size="small">
            <el-descriptions-item label="项目部：(实际申请人）">{{ruleForm.user.name}}</el-descriptions-item>
            <el-descriptions-item label="综合管理部">--</el-descriptions-item>
            <el-descriptions-item label="总经理">--</el-descriptions-item>
            <el-descriptions-item label="会计">--</el-descriptions-item>
        </el-descriptions>
    </el-form>
    <div class="text-center mt30">
        <el-button type="primary" @click="submitForm(ruleFormRef)" :loading="loading"> 保存并返回列表 </el-button>
    </div>
</template>
  
<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router';
import http from '../../../util/request';
import { ElMessage, FormInstance } from 'element-plus';
import router from '../../../router';
const loading = ref<boolean>(false)
const ruleFormRef = ref<FormInstance>()
const id:any = ref(useRouter().currentRoute.value.params.id)
let User:any = sessionStorage.getItem('user')
User = JSON.parse(User)
interface RuleForm {
    id:number
    user_id:number
    role_id:number
    apply_date: string
    apply_price: number
    back_borrow: number
    audit_price: number
    nature: string
    pay_type:string
    price: number
    receive_type: string
    details:any
    role:any
    user:any
}

const ruleForm = ref<RuleForm>({
    id:0,
    user_id:0,
    role_id:0,
    apply_date: '',
    apply_price: 0,
    back_borrow: 0,
    audit_price: 0,
    nature: '/',
    pay_type:'/',
    price: 0,
    receive_type: '/',
    details:'',
    role:{},
    user:{}
})

interface Details {
    title:string
    type:string
    project:string
    status:string
    role:string
    apply_price:number
    audit_price:number
}

const Details = ref<Details>({
    title:'/',
    type:'/',
    project:'/',
    status:'/',
    role:'/',
    apply_price:0,
    audit_price:0
})

const tableData = ref<Details[]>([])

const submitForm = async (formEl: FormInstance | undefined) => {
    console.log(ruleForm.value)
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            loading.value = true
            let request:any = null
            ruleForm.value.details = JSON.stringify(tableData.value)
            if(ruleForm.value.id){
                request = http.patch('/reimburse',ruleForm.value)
            }else{
                request = http.put('/reimburse',ruleForm.value)
            }
            request.then((response:any)=>{
                loading.value = false
                if(response.data.code != 200){
                    ElMessage.error(response.data.msg);
                    return
                }
                router.push({ name: 'materialReimburse'})
            })
        } else {
            console.log('error submit!', fields)
        }
    })
}

const getData = () => {
    if(id.value == 0){
        return;
    }
    http.get('/reimburse/'+id.value).then((response:any)=>{
        ruleForm.value = response.data.data
        tableData.value = ruleForm.value.details
        ruleForm.value.details = ''
    })
}

onMounted(()=>{
    getData()
})
</script>
<style scoped>
</style>
